<template>
	<view class="page-content">
		<view class="page-title">基本使用</view><ui-br />
		<view class="page-tips">在页面中引入组件</view><ui-br />
		<ui-code :code="code0"></ui-code><ui-br />
		<view class="page-tips">绑定<span class="span-code">ref</span>来调用开启</view><ui-br />
		<ui-code :code="code1"></ui-code><ui-br />
		<view class="page-tips">绑定<span class="span-code">ref</span>来调用关闭</view><ui-br />
		<ui-code :code="code2"></ui-code><ui-br />
		
		<view class="page-title">演示示例</view><ui-br />
		<view class="line-bottom">
			<ct-button @click="openPopup('center')" type="primary">打开中心弹框</ct-button>
		</view><ui-br />
		<view class="line-bottom">
			<ct-button @click="openPopup('bottom')" type="primary">打开底部弹框</ct-button>
		</view><ui-br />
		<view class="line-bottom">
			<ct-button @click="openPopup('left')" type="primary">打开左侧弹框</ct-button>
		</view><ui-br />
		<view class="line-bottom">
			<ct-button @click="openPopup('right')" type="primary">打开右侧弹框</ct-button>
		</view><ui-br />
		<view class="line-bottom">
			<ct-button @click="openComponent" type="primary">打开组件弹框</ct-button>
		</view>
		<ct-popup ref="ct_popup">
			<view class="page-popup-bg" :style="[{
				width:mode=='bottom'?'750rpx':'350rpx'
			}]">
				<ct-button @click="closePop">关闭</ct-button>
			</view>
		</ct-popup>
		<ui-br />
		<!-- <view class="page-tips">在页面中使用组件弹框</view><ui-br />
		<ui-code :code="code3"></ui-code><ui-br /> -->
	</view>
</template>

<script>
	import {code0,code1,code2,code3} from './code.js';
	export default {
		data() {
			return {
				code0: "",
				code1: "",
				code2: "",
				code3: "",
				mode:""
			}
		},
		created() {
			this.code0 = code0
			this.code1 = code1
			this.code2 = code2	
			this.code3 = code3
		},
		methods: {
			openPopup(type){
				this.mode = type
				this.$refs.ct_popup.open({
					mode:type
				})
			},
			closePop(){
				this.$refs.ct_popup.close()
			},
			//
			openComponent(){
				this.$ct.openpopup({
					 componentsName:"expireConfirm",
					 params:{},
				})
			}
			
		}
	}
</script>

<style lang="scss" scoped>
.page-popup-bg{
	width: 350rpx;
	height: 350rpx;
	background-color: #fff;
	border-radius: 24rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}
</style>
